<script setup lang="ts">
import SysDialog from "@/components/SysDialog/index.vue";
import useAssignMenu from '@/composables/system/menu/useAssignMenu';
import useDialog from '@/hooks/useDialog';
// 弹框
const { dialog, onShow, onClose } = useDialog()

const { onConfirm, show, assignTreeData, defaultProps, assignTree, assignApiTreeData, assignApiTree } = useAssignMenu(dialog, onShow, onClose)

// 暴露方法给外部使用
defineExpose({
    show
})
</script>
<template>
    <SysDialog :title="dialog.title" :width="dialog.width" :height="500" :visible="dialog.visible" @onClose="onClose"
        @onConfirm="onConfirm">
        <template v-slot:content>
            <el-tabs type="border-card">
                <el-tab-pane label="角色菜单">
                    <el-tree ref="assignTree" :data="assignTreeData.list" node-key="id" :props="defaultProps"
                        empty-text="暂无数据" :show-checkbox="true" default-expand-all :highlight-current="true"
                        :default-checked-keys="assignTreeData.assignTreeChecked"></el-tree>
                </el-tab-pane>
                <el-tab-pane label="角色API">
                    <el-tree ref="assignApiTree" :data="assignApiTreeData.list" node-key="id" :props="defaultProps"
                        empty-text="暂无数据" :show-checkbox="true" default-expand-all :highlight-current="true"
                        :default-checked-keys="assignApiTreeData.assignApiTreeChecked"></el-tree>
                </el-tab-pane>
            </el-tabs>
        </template>
    </SysDialog>
</template>
<style lang="scss" scoped>
</style>